<template>
	<div class="showDicom">

		<div class="showDicom_left handle">
			<h6 class="card-header">患者信息</h6>
			<div class="showDicom_msg">

				<el-card shadow="never" style="background-color: transparent;border:0px;">

					<p class="text">{{ 'id:' + person.id }} </p>
					<p class="text">{{ '姓名:' + person.name }}</p>
					<p class="text">{{ '性别:' + person.sex }} </p>
					<p class="text">{{ '年龄：' + person.age }}</p>
					<p class="text">{{ '电话:' + person.tel }} </p>
					<p class="text">{{ '部位:' + person.zone }}</p>
					<p class="text">{{ '过敏史:' + person.his }}</p>

				</el-card>
			</div>
			<h6 class="card-header">操作步骤</h6>
			<div class="showDicom_steps">
				<div style="height: 310px; max-width: 600px;margin-top: 10px;">
					<el-steps direction="vertical" :active="-1"
						style="height: 310px; max-width: 600px;margin-top: 10px;">
						<el-step title="Step 1 上传图片" />
						<el-step title="Step 2 点击开始处理" />
						<el-step title="Step 3 点击单张图片进行预览" />
						<el-step title="Step 4 查看历史记录" />
					</el-steps>
				</div>
			</div>
		</div>

		<div class="showDicom_middle">

			<!-- 配置上传的触发元素，例如按钮 -->
			<!-- 上传组件，用于选择文件 -->
			<div id="up" style="display: flex;">
				<div style="margin-right: 50px;">


					<el-upload class="avatar-uploader" :action="uploadUrl" :on-success="handleSuccess"
						:on-preview="handlePreview" :on-change="handleChange" list-type="picture-card"
						:auto-upload="false" :file-list="fileList" :limit="1" :show-file-list="false">

						<img v-if="url[0]" :src="url[0]" style="height: 100%; width: 100%;">
						<el-icon v-else class="avatar-uploader-icon" style="transform: scale(2.5);">
							<Plus />
						</el-icon>


					</el-upload>
					<el-button type="primary"  style=" margin-left: 150px; margin-top: 5px;width: 100px;font-size: larger;"
						@click="upload">开始处理</el-button>
				</div>
				<div>

					<el-image style="width: 400px; height: 400px" :src="url[1]" :zoom-rate="1.2" :max-scale="7"
						:min-scale="0.2" :preview-src-list="url" :initial-index="1" fit="cover" />
					<p align="center" class="desc">腐蚀</p>
				</div>


			</div>
			<div id="down" style="margin-top: 50px; display: flex;">
				<div style="margin-right: 50px;">

					<el-image style="width: 400px; height: 400px" :src="url[2]" :zoom-rate="1.2" :max-scale="7"
						:min-scale="0.2" :preview-src-list="url" :initial-index="2" fit="cover" />
					<p align="center" class="desc"> 黑顶帽变换</p>
				</div>
				<div>

					<el-image style="width: 400px; height: 400px	" :src="url[3]" :zoom-rate="1.2" :max-scale="7"
						:min-scale="0.2" :preview-src-list="url" :initial-index="3" fit="cover" />
					<p align="center" class="desc">白顶帽变换</p>
				</div>

			</div>

		</div>

		<div class="showDicom_right1">
			<h6 class="card-header">历史记录</h6>
			<el-table class="history" :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">

				<el-table-column prop="time" label="时间" width="180" />
				<el-table-column prop="" label="操作" width="100">
					<template v-slot="scope">
						<el-button type="primary" size="small" @click="showUrl(scope.$index)">
							查看
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<el-dialog v-model="dialogVisible" title="" width="500" style="background-color: #171717;">
			<div>
				<div>
					<el-image style="width: 400px; height: 400px" :src="detail[0]" :zoom-rate="1.2" :max-scale="7"
						:min-scale="0.2" :preview-src-list="detail" :initial-index="1" fit="cover" />
					<p class="text" align="left">原图</p>
				</div>
				<div>
					<el-image style="width: 400px; height: 400px" :src="detail[1]" :zoom-rate="1.2" :max-scale="7"
						:min-scale="0.2" :preview-src-list="detail" :initial-index="1" fit="cover" />
					<p class="text" align="left">腐蚀</p>
				</div>
				<div style="margin-right: 50px;">
					<el-image style="width: 400px; height: 400px" :src="detail[2]" :zoom-rate="1.2" :max-scale="7"
						:min-scale="0.2" :preview-src-list="detail" :initial-index="2" fit="cover" />
					<p class="text"> 白顶帽变换</p>
				</div>
				<div>
					<el-image style="width: 400px; height: 400px	" :src="detail[3]" :zoom-rate="1.2" :max-scale="7"
						:min-scale="0.2" :preview-src-list="detail" :initial-index="3" fit="cover" />
					<p class="text">黑顶帽变换</p>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { Plus } from '@element-plus/icons-vue'
import axios from 'axios';

export default {
	data() {
		return {
			// 上传的图片

			faliedUrl: "https://kyl1n.oss-cn-beijing.aliyuncs.com/Snipaste_2024-05-01_16-42-27-PicPicAI-enhanced.png",
			// 上传的接口URL
			uploadUrl: 'http://154.91.178.151:8088/enhanceImage',
			getUrl: 'http://154.91.178.151:8088/history/enhance',
			url: [
			],
			fileList: [],
			tableData: [
        {
            "images": [
                "http://123.249.83.150:9000/picture/d256b6b8-1d7a-46da-9b8c-f022723d56b5.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=94c8aa0177faa672ec8b2418f005a67a14875c3235339adf3dcfa64e63ca4e85",
                "http://123.249.83.150:9000/picture/beb9b238-ce02-4c18-b858-c13819ef3e9f.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=dc58555104c4ba02feb4ae10d311d0b34b34be545720d06cdcdad5eca121b8a0",
                "http://123.249.83.150:9000/picture/87efb004-e842-462a-bc9c-92071123c166.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=0bb6ac330092d41ec51b40f58d48768c874b3f950c193ea8bcbc521ec1d29d52",
                "http://123.249.83.150:9000/picture/583e01cd-7134-45a9-8510-5d4ee1fc8833.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=2675e5494c0679d1815e9403d17cd90aa0a7a004daa0d3b0acb058e9b0ed944a"
            ],
            "time": "2024-05-07 20:59:05"
        },
        {
            "images": [
                "http://123.249.83.150:9000/picture/ac668ad9-5caa-4a6d-a34e-9986f372ad31.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=166f9b7854b5e8fc113c81d0dc4ccb4d9aa5553c95cdedd9fdd1108a30832490",
                "http://123.249.83.150:9000/picture/00aa8260-3b22-43d3-b36e-500aca6893d0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=48dd35f4e82668f799f3ba21471d5d4f2e3cdb565e9a44f83e5b6e537d039233",
                "http://123.249.83.150:9000/picture/d0ca0660-5b5e-4ea5-964c-f45b294f2507.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=e80d1132426526d34a208c7de209ff4d1922a55695b07b54221c7e4fb2328260",
                "http://123.249.83.150:9000/picture/7e311f8b-3e23-49a8-aeeb-9c93697777a4.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=4a1cd6cca577f053f44455ce78ffef91b0374b98700e64b5b47580708ca102f9"
            ],
            "time": "2024-05-07 20:57:14"
        },
        {
            "images": [
                "http://123.249.83.150:9000/picture/85653b59-7af8-4e3a-a50c-bc0b05421942.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=481156fb3325c61aad0ff77de34d66c7ec1eccfec2df559e42f8ecb875dd64aa",
                "http://123.249.83.150:9000/picture/6da3a9f6-8d1d-476b-a05b-a0b27e81bc27.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=86ff0c3d10b04f2c515d8c0a9d876ce24f449a822233125b656c126afc7b8055",
                "http://123.249.83.150:9000/picture/e9cb3f2c-2806-48be-b82d-e76fe04e3fbc.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=381b1a90112d0c7cfa84ec54772bc3f969df9e5375d0209bfc091e90818f88bd",
                "http://123.249.83.150:9000/picture/91ebed17-b3c8-4acc-b1a1-77e19aebe48f.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=b95d88fd8a99fa2e9ba8608db83bcaa65ab0e15a5c1326cf0e751495c8f72c91"
            ],
            "time": "2024-05-07 20:51:28"
        },
        {
            "images": [
                "http://123.249.83.150:9000/picture/18d4d276-9217-443f-b12d-3ed4a5b91d4f.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=536c2fbb615eb747ef3b4416d9816ef54c95604453ea324678a537acfb972ff3",
                "http://123.249.83.150:9000/picture/ea38e6bd-a545-49de-a30e-7d6121e32425.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=13168a07cd7c0b7301e5c2818f0169bcffd8b363f5f7d1714ade1bce15fba32a",
                "http://123.249.83.150:9000/picture/55a57255-7d22-41c2-9e44-685fae6569ba.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=26e385936bf47e170b6e3603f51ae7a98fe42f961d6f676fb012bee19fa8c548",
                "http://123.249.83.150:9000/picture/9050ef65-f195-40e6-bcfc-00ff0915f7ee.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=fd936e2442f16a7ef7b1632278d721e6d6707d516075da50451c40cb8b86a84d"
            ],
            "time": "2024-05-07 20:46:33"
        },
        {
            "images": [
                "http://123.249.83.150:9000/picture/93dd4e97-accc-4e3a-a181-007dfe29c468.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=75ca2d4f9be48b85ad4ee535fbff8244025804f061bae98ce0b984177bc796cc",
                "http://123.249.83.150:9000/picture/2932abb7-1287-4e8b-8934-27e4237765c2.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=3d5bfb414893315fd93ed584dcd4290b57cf0042ce0a8e06e917fd8912670695",
                "http://123.249.83.150:9000/picture/59829cc3-4f94-47ba-aee4-3b216af9765d.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=03c108a5c0e4fe6be76e8479a249bcdb152d54d4fd14bbdfb06bb4cddde2842e",
                "http://123.249.83.150:9000/picture/38207615-0e34-4df2-afe6-81ecfc00f015.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=70dc4da7beb347a386ecc855381b2490e292ea8cdcbe526623b9cd0895a86238"
            ],
            "time": "2024-05-07 20:43:01"
        },
        {
            "images": [
                "http://123.249.83.150:9000/picture/86c03248-82c8-4e3b-8916-c14ae5671c4c.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=9ac1fccff0ce6e62e9edf3b95435eabff80fcc6b3a4c620f7a5332715365d43f",
                "http://123.249.83.150:9000/picture/dbd3e3ab-1edf-4553-a856-7a9f1592ac7a.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=057fa6b47f45f11b5e0067d1d325da4c2f7d45833b6f3beea82127f7e1194ca8",
                "http://123.249.83.150:9000/picture/74596ae3-cc46-4faa-af14-c3097db0d475.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=b481dcecd347426d1a6139df9b0c80c56014a9d61e006d5c922efa34fcdfc733",
                "http://123.249.83.150:9000/picture/12d10a06-83fd-4be8-a1fa-0d665986ad43.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=f27b4169dedfda51f169737eeca40665f779cb516829dbd3b77143089c5ac30c"
            ],
            "time": "2024-05-07 20:41:22"
        },
        {
            "images": [
                "http://123.249.83.150:9000/picture/174b9eb5-018b-4ada-ba3c-60d208f61231.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=d4c2b5ad5e94c76b526eefbf65789dc5df19627f4ca2892d05432dc6c933b7f0",
                "http://123.249.83.150:9000/picture/97f63e42-a135-430a-b308-e379b8f5b3f9.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=233be1711e7bba83763cb94b6bb6cfbcadc89ba98f01904b10a43db81c8d594e",
                "http://123.249.83.150:9000/picture/1fd89f33-ae9f-4434-987b-519a7a589daa.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=5e0eec1311da09c6d2c7ad6e386f7c67c346531fb6e2839d9b2f34e925b023fb",
                "http://123.249.83.150:9000/picture/77b3aa4f-f150-40ee-a108-16dc859bba40.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=102254e70f7f5df7cf55fa4746ab14018ff6127b8172a852476260a5a78daa4e"
            ],
            "time": "2024-05-07 20:38:50"
        },
        {
            "images": [
                "http://123.249.83.150:9000/picture/1ade8b09-b0dc-42c3-ab0c-cbae86d0b128.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=d6d033f0cc1c84450654e495c38c5f497e495dc9d7b617ea6e7e3019e9d244da",
                "http://123.249.83.150:9000/picture/181176e9-da0c-4775-a191-c278cca2a7fd.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=b490cdfc4eb96625a9cc60840fa5a0d84e41795670aafd43652a46240501203c",
                "http://123.249.83.150:9000/picture/f5b76978-466f-4d43-a45c-fbf6e7cb6b8d.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=561350eb77b78e8ede409e7713b71ab7bff98c61f9277d5db8814a85be33dcd9",
                "http://123.249.83.150:9000/picture/2ba9f5c7-b8a5-4841-ac58-cbf8b2c06e23.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=4cb6d196b19f39e4cd4bb100e1d20214a3b8362120a8f84bc76d856c0c0e1a1f"
            ],
            "time": "2024-05-07 20:37:12"
        },
        {
            "images": [
                "http://123.249.83.150:9000/picture/8b423a3c-472a-41fd-b6d1-4e53d1bf59dc.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=d7225617eb18289431e47fef979542a8586c310b02e8df39d39b04ce4f0371e5",
                "http://123.249.83.150:9000/picture/0cd6b57d-e9cd-4913-93e1-2e5fc7e96b08.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=836b95edf373d0130b74707a5daf6b46abfe0a8169ce41a31296c2d59006f819",
                "http://123.249.83.150:9000/picture/23cb0efb-7bf7-4851-9b2a-5ff5a207e399.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=b30a0719fe2590cc9b29f296ea45d61b6fc7e259e3939f4847e317a7580c99b3",
                "http://123.249.83.150:9000/picture/90d48130-fe83-4940-ac42-c24a2e68c2f6.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=7cda8feb15d206597c366c12829ce5321765c8cc0070f086de4c614265acb8c7"
            ],
            "time": "2024-05-07 20:31:55"
        },
        {
            "images": [
                "http://123.249.83.150:9000/picture/8f76b7d2-988e-4c67-9357-13338e0467dc.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=eec380e82c91f2d560707e1e5576e5fb3ace02d5b5739bcd7475d8b6f41ba39b",
                "http://123.249.83.150:9000/picture/5ecd994a-6dd4-4a4e-938e-50b016da844c.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=cfa3c8739ddf0f5151d043e3433eba596a093428b849cc2769d836376b730f17",
                "http://123.249.83.150:9000/picture/bddd388a-1c89-4096-a76c-55fd1354871c.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=2ada25b0b450f59883c5a3784511cd562938d194bcc7c0028a83e91339cb6cb7",
                "http://123.249.83.150:9000/picture/4e5457ed-5cd3-4d42-999b-29ed6b2cfd8c.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=d3e4c350ca5703cb277e6468ac98ec50c220e08f7fdc023a7e0bf559ef4324e0"
            ],
            "time": "2024-05-07 20:31:25"
        }
    ],
			person: {
				id: "2024001",
				name: "李明",
				sex: "男",
				age: "20",
				tel: "188182823",
				zone: "肺部",
				his: "无"
			},
			detail: ["", "", ""],
			dialogVisible: false,
			urls: ["https://kyl1n.oss-cn-beijing.aliyuncs.com/og.png", "https://kyl1n.oss-cn-beijing.aliyuncs.com/%E8%85%90%E8%9A%80.png", "https://kyl1n.oss-cn-beijing.aliyuncs.com/%E9%BB%91%E9%A1%B6%E5%B8%BD.png", "https://kyl1n.oss-cn-beijing.aliyuncs.com/%E7%99%BD%E9%A1%B6%E5%B8%BD.png"]
		};
	},
	mounted() {
		this.url[0] = "";
		for (var i = 1; i < 4; i++) {
			this.url[i] = this.faliedUrl
		}
		// axios({
		//        url: this.getUrl,
		//        method: 'get',

		//      })
		//     .then(response => {
		// 		this.tableData = response.data.data
		// 	})
		//     .catch(this.handleError);
	},
	methods: {
		upload() {
			// const someIntParam = 1;
			// // 假设只有一个文件上传
			// const file = this.fileList[0].raw;
			// console.log(file)
			// const formData = new FormData();
			// formData.append('file', file);




			// axios({
			//         url: this.uploadUrl,
			//         method: 'post',
			//         data: formData,
			// 		params: {	
			//                      type: 3
			// 		},
			//         headers: {
			//           'Content-Type': 'multipart/form-data', // 必须设置，即使不显式设置，axios也会默认添加

			//         },
			//       })
			//       .then(response => {
			// 		  console.log(response.data.data)
			// 		this.url = response.data.data
			// 	  })
			//       // .catch(this.handleError);

			// axios({
			//        url: this.getUrl,
			//        method: 'get',

			//      })
			//     .then(response => {
			// 		this.tableData = response.data.data
			// 	})
			//     .catch(this.handleError);
			// console.log(this.tableData)
			for (var i = 0; i < 4; i++) {
				this.url[i] = this.urls[i];
			}
		},
		// 文件上传成功后的回调
		handleSuccess(response, file, fileList) {
			// 通常在这里处理上传成功后的逻辑，例如更新fileList

		},
		// 文件预览的回调
		handlePreview(file) {
			console.log(file);
			// 可以在这里打开一个新窗口或使用组件来预览图片
		},
		// 文件移除的回调
		handleChange(file, fileList) {
			// 处理文件移除后的逻辑
			this.fileList = fileList;
		},
		showUrl(idx) {
			this.dialogVisible = true
			for (var i = 0; i < 4; i++) {
				this.detail[i] = this.tableData[idx].images[i]
			}
		}

	},
}
</script>


<style>
.desc{
	font-size: 1.6vw;
}


.card-header {
	width: 100%;
	font-size: 1.6vw;
	font-weight: bold;
	text-align: center;
	margin: 30px 0;
}

/*最外层透明*/
.el-table,
.el-table__expanded-cell {
	background-color: transparent !important;
	color: white;
}

/* 表格内背景颜色 */
.el-table th,
.el-table tr,
.el-table td {
	color: white;
	background-color: transparent !important;
}

.text {
	color: white !important;
	text-align: left;
	font-size: 1.3vw ; 
}

.text1 {
	color: black;
	text-align: left;
}

.el-table__inner-wrapper {
	margin-top: 10px;
	width: 280px;
}

.el-table .cell {
	margin: 10px;
	font-size: 20px;
}

.el-step.is-vertical .el-step__title {
	font-size: 1.2vw;
}

.el-upload--picture-card {
	width: 400px !important;
	height: 400px !important;
	display: block;
	background-color: #171717 !important;
}

.el-upload--picture-card:hover {
	transform: scale(1.05);
	box-shadow: 6px 6px 10px rgba(0, 0, 0, 1),
		1px 1px 10px rgba(255, 255, 255, 0.6),
		inset 2px 2px 10px rgba(0, 0, 0, 1),
		inset -1px -1px 5px rgba(255, 255, 255, 0.6);
}

.avatar-uploader:hover {
	box-shadow: 0px 15px 60px #00FF7F;
	outline: 1px solid #2b9962;
	border-radius: 10px;
}

.color {
	filter: sepia() saturate(4) hue-rotate(250deg);
}

.showDicom {
	margin-top: 100px;
	padding: 0px 2vw;
	display: flex;
}

.avatar-uploader {
	border: 2px dashed #ffffff;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	width: 400px;
	height: 400px;

}

.history {
	align-items: flex-start;

}

.avatar-uploader-icon {
	color: #8c939d;
	width: 400px;
	height: 400px;
	line-height: 450px;
	text-align: center;


}


.showDicom_left {
	text-align: center;
	flex: 0.3;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	background: #171717;
	margin-top: 30px;
	margin-bottom: 30px;
	border-radius: 15px;
	box-shadow: inset 2px 2px 10px rgba(0, 0, 0, 1),
		inset -1px -1px 5px rgba(255, 255, 255, 0.6);
}

.showDicom_middle {
	flex: 0.6;
	padding: 30px;
	margin: 30px;
	background: #171717;
	border-radius: 15px;
	box-shadow: inset 2px 2px 10px rgba(0, 0, 0, 1),
		inset -1px -1px 5px rgba(255, 255, 255, 0.6);
}

.showDicom_right1 {
	flex: 0.1;
	width: 60%;
	flex-wrap: wrap;
	background: #171717;
	padding: 10px 30px;
	margin-top: 30px;
	margin-bottom: 30px;
	border-radius: 15px;
	box-shadow: inset 2px 2px 10px rgba(0, 0, 0, 1),
		inset -1px -1px 5px rgba(255, 255, 255, 0.6);
}

.showDicom_msg {
	padding: 10px;
	width: 86%;
	height: 36%;
	overflow-y: auto;
	background-color: #212121;
	border-radius: 6px;
	border: 2px solid #212121;
	box-shadow: 6px 6px 10px rgb(0 0 0), 1px 1px 10px rgb(255 255 255 / 60%);
	color: #ffffff;
}

.showDicom_steps {
	padding: 10px 20px;
	width: 86%;
	height: 36%;
	overflow-y: auto;
	background-color: #212121;
	border-radius: 6px;
	border: 2px solid #212121;
	box-shadow: 6px 6px 10px rgb(0 0 0), 1px 1px 10px rgb(255 255 255 / 60%);
	color: #ffffff;
	margin-bottom: 10px;
}

.showDicom_btn {
	width: 85%;
	margin: 20px 0;
	padding: 10px 35px;
	cursor: pointer;
	background-color: #212121;
	border-radius: 6px;
	border: 2px solid #212121;
	box-shadow: 6px 6px 10px rgba(0, 0, 0, 1),
		1px 1px 10px rgba(255, 255, 255, 0.6);
	color: #ffffff;
	font-size: 15px;
	font-weight: bold;
	transition: 0.35s;
}

.showDicom_btn:hover {
	transform: scale(1.05);
	box-shadow: 6px 6px 10px rgba(0, 0, 0, 1),
		1px 1px 10px rgba(255, 255, 255, 0.6),
		inset 2px 2px 10px rgba(0, 0, 0, 1),
		inset -1px -1px 5px rgba(255, 255, 255, 0.6);
}


/* 基石 */
.cornerstone_content {
	display: flex;
	position: relative;
}

.cornerstone_element {
	margin: 0 auto;
	max-width: 660px;
	max-height: 660px;
	width: 50vw;
	height: 50vw;
}

.cornerstone_shade {
	position: absolute;
	z-index: 100;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: black;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid gray;
	border-radius: 5px;
	padding: 100px;
}

.cornerstone_dragger {
	/* display: flex;
	    justify-content: center;
	    align-items: center;
	    flex-wrap: wrap; */
	width: 100%;
	height: 100%;
	border: 1px dashed gray;
	border-radius: 6px;
	box-sizing: border-box;
	text-align: center;
	cursor: pointer;
	background-color: #161616;

}

.cornerstone_dragger_input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
}

.cornerstone_dragger:hover {
	box-shadow: 0px 15px 60px #00FF7F;
	outline: 1px solid #2b9962;
	border-radius: 10px;
}

.cornerstone_dragger_img {
	display: block;
	margin: 0 auto;
	margin-top: 20%;
	width: 15%;
}




.load {
	/* text-align: center; */

}
</style>